<template>
	<Layout :showFooter="true">
		<template #title>律师详情</template>
		<view class="lawyer-intro">
			<view class="lawyer-intro__portrait">
				<image mode="aspectFill" :src="detail.lawFirmLogo"></image>
			</view>
			<view class="lawyer-intro__info">
				<view class="follow" :class="{'follow--highlight':detail.follow != '1'}" @click.stop="tapFollow">
					{{detail.follow == '1' ?'已关注':'关注'}}
				</view>
				<view class="lawyer-intro__info__title">
					<view class="ellipsis" style="max-width:220rpx;">
						{{detail.lawFirmName}}
					</view>
					<view class="tag">律师</view>
				</view>
				<view class="lawyer-intro__info__desc">
					<template v-if="detail.certification == 1">
						执业律师
						<text style="padding:0 30rpx 0 20rpx;">|</text>
					</template>
					执业{{detail.practice}}年
				</view>
				<view class="lawyer-intro__info__desc fans">
					粉丝：{{detail.followers}}
				</view>
				<!-- 			<view class="iflex lawyer-intro__info__tag">
					<view class="ellipsis-line-clamp">
						{{detail.lawFirmTag}}
					</view>
				</view> -->
			</view>
		</view>



		<InfoBlock standard header :headerRight="false" customStyle="margin-top:40rpx;">
			<template #header>律师档案</template>

			<view class="lawyer-record">
				<view class="lawyer-record__desc">
					<view class="tag">擅长</view>
					<view class="lawyer-record__desc__content">{{detail.special}}</view>
				</view>
				<view class="lawyer-record__desc">
					<view class="tag">简介</view>
					<view class="lawyer-record__desc__content">
						<view class="ellipsis-line-clamp">{{detail.lawFirmDesc}}</view>
					</view>
				</view>

				<view class="lawyer-record__location">
					<view class="lawyer-record__location__desc">
						<image class="inline-flex company-icon" src="/static/image/lawyer/company.png"></image>
						{{detail.companyName}}
					</view>
					<view class="lawyer-record__location__desc">
						<image class="inline-flex location-icon" src="/static/image/lawyer/location.png"></image>
						{{detail.lawFirmAddress}}
					</view>
				</view>
			</view>
		</InfoBlock>

		<SectionTitle :customStyle="{marginTop:'50rpx'}">
			<template #title>律师案例</template>
			<text @click.stop="tapAllCase">查看全部</text>
		</SectionTitle>

		<view v-for="item of caseList" :key="item.id" class="lawyer-case" @click.stop="tapCaseDetail(item.id)">
			<view class="lawyer-case__box">
				<view class="lawyer-case__image">
					<image mode="aspectFill" :src="item.caseImage"></image>
				</view>
				<view class="lawyer-case__intro">
					<view class="ellipsis-line-clamp">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>

		<SectionTitle :customStyle="{marginTop:'50rpx'}">
			<template #title>律师荣誉</template>
			<text @click.stop="tapAllHonor">查看全部</text>
		</SectionTitle>

		<view class="lawyer-honor-section">
			<view v-for="item of honorList" :key="item.awardId" class="lawyer-honor"
				@click.stop="tapHonorDetail(item.awardId)">
				<view class="lawyer-honor__image">
					<image mode="aspectFill" :src="item.awardImage"></image>
				</view>
				<view class="lawyer-honor__intro ellipsis">{{item.awardContent}}</view>
			</view>
		</view>

		<SectionTitle :customStyle="{marginTop:'50rpx'}">
			<template #title>用户评论</template>
			<text @click.stop="tapAllLawyerAppraise">查看全部({{commontListTotal}})</text>
		</SectionTitle>

		<view class="lawyer-user-comment">
			<view class="inline-flex fill column lawyer-user-comment__box">
				<image @click.stop="tapToComment" class="to-comment" src="/static/image/lawyer/comment.png"></image>
				<view v-for="item of commontList" :key="item.id" class="inline-flex fill column user-comment">
					<view class="inline-flex fill user-comment__info">
						<image class="inline-flex user-comment__info__portrait" :src="item.avatar"></image>
						<view class="flex column user-comment__info__other">
							<view>{{item.phoneNumber}}</view>
							<text>{{item.reviewTime}}</text>
						</view>
						<view class="user-comment__info__rate">
							<u-rate inactive-color="#D9D9D9" active-color="#FF710A" :count="5"
								:current="item.overallRating" disabled></u-rate>
						</view>
					</view>

					<view v-if="item.reviewTagList.length>0" class="inline-flex fill user-comment__tags">
						<view v-for="(it,itIndex) of item.reviewTagList" :key="itIndex"
							class="iflex aic jcc user-comment__tag">{{it}}</view>
					</view>

					<view v-if="item.reviewContent" class="inline-flex fill user-comment__content">
						{{item.reviewContent}}
					</view>
				</view>
			</view>
		</view>

		<template #footer>
			<view class="common-footer">
				<u-button style="width:100%;" type="primary" size="large" :fill="true"
					@click="tapToChat">我要咨询</u-button>
			</view>
		</template>
	</Layout>
	<LoginPopup @success="loadData"></LoginPopup>
</template>

<script setup lang="ts" name="LawyerDetail">
	import type { AnyObj } from '@/types/global';
	import Layout from '@/components/layout/layout.vue';
	import InfoBlock from '@/components/info-block/info-block.vue';
	import SectionTitle from '@/components/section-title/section-title.vue';
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import { getLawfirmDetail, getLawfirmCaseList, getLawfirmAwardList, getLawfirmCommentList } from '@/apis/lawfirm';
	import { ref } from 'vue';
	import { isLogin } from '@/utils/auth';
	import { isEmpty } from '@/utils/util';
	import { useAuthStore } from '@/stores';
	import { saveUnfollow, saveFollow } from '@/apis/auth';
	import { sendTextMsg } from '@/im';

	const authStore = useAuthStore();
	let lawFirmId = '';
	const detail = ref<AnyObj>({});
	const caseList = ref<AnyObj[]>([]);
	const honorList = ref<AnyObj[]>([]);
	const commontList = ref<AnyObj[]>([]);
	const commontListTotal = ref(0);

	function tapToChat() {
		const msg = `你好，我想要咨询【${detail.value.lawFirmName}】`
		sendTextMsg({
			body: msg,
			ext: msg.length
		}, true);
	}

	function tapAllCase() {
		uni.navigateTo({
			url: `/pages-lawyer/lawyer-case/lawyer-case?lawFirmId=${lawFirmId}`
		})
	}

	function tapCaseDetail(id : string) {
		uni.navigateTo({
			url: `/pages-lawyer/case-detail/case-detail?id=${id}`
		})
	}

	function tapAllHonor() {
		uni.navigateTo({
			url: `/pages-lawyer/lawyer-honor/lawyer-honor?lawFirmId=${lawFirmId}`
		})
	}

	function tapHonorDetail(id : string) {
		uni.navigateTo({
			url: `/pages-lawyer/honor-detail/honor-detail?id=${id}`
		})
	}

	function tapAllLawyerAppraise() {
		uni.navigateTo({
			url: `/pages-lawyer/lawyer-appraise/lawyer-appraise?lawFirmId=${lawFirmId}`
		})
	}

	function tapToComment() {
		uni.navigateTo({
			url: `/pages-lawyer/lawyer-comment/lawyer-comment?lawFirmId=${lawFirmId}`
		})
	}

	function loadData() {
		console.log('lawFirmId', lawFirmId);
		getLawfirmDetail(lawFirmId).then((res) => {
			if (res.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: res.msg ?? '服务器忙，请稍后再试'
				})
				return;
			}
			detail.value = res.data ?? {};
		});

		getLawfirmCaseList(lawFirmId).then((res) => {
			caseList.value = res.rows ?? [];
		});

		getLawfirmAwardList(lawFirmId).then((res) => {
			honorList.value = res.rows ?? [];
		});

		getLawfirmCommentList({ lawFirmId: lawFirmId, pageSize: 3 }).then((res) => {
			const rows = res.rows ?? [];
			for (const item of rows) {
				item.reviewTagList = isEmpty(item.reviewTag) ? [] : item.reviewTag.split(',')
			}
			commontList.value = rows;
			commontListTotal.value = res.total;
		});
	}



	function tapFollow() {
		if (!isLogin()) {
			authStore.show();
			return;
		}
		if (detail.value.follow == '1') {
			saveUnfollow(lawFirmId).then((res) => {
				if (res.code !== 200) {
					uni.showToast({
						icon: 'none',
						title: res.msg ?? '服务器忙，请稍后再试'
					});
					return;
				}
				detail.value.follow = "0";
				uni.showToast({
					icon: 'none',
					title: '已取消'
				});
				setTimeout(() => {
					loadData()
				}, 1500);
			});
			return;
		}

		saveFollow(lawFirmId).then((res) => {
			if (res.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: res.msg ?? '服务器忙，请稍后再试'
				});
				return;
			}
			detail.value.follow = "1";
			uni.showToast({
				icon: 'none',
				title: '已关注'
			});
			setTimeout(() => {
				loadData()
			}, 1500);
		});
	}

	onPullDownRefresh(() => {
		loadData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	});

	onLoad((options) => {
		options = options as { lawFirmId : string; }
		lawFirmId = options.lawFirmId;
		loadData();
	});
</script>

<style lang="scss">
	.lawyer-intro {
		position: relative;
		display: inline-flex;
		justify-content: space-between;
		align-self: center;
		width: 100%;
		width: 690rpx;
		height: 232rpx;
		padding: 32rpx;
		margin-top: 30rpx;
		box-sizing: border-box;
		background: linear-gradient(178deg, #FFF1E6 0%, #FFFFFF 51%);
		border-radius: 8rpx;
		border: 4rpx solid #FFFFFF;

		&__portrait {
			display: inline-flex;
			flex-shrink: 0;
			width: 148rpx;
			height: 148rpx;
			border-radius: 8rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

		}

		&__info {
			position: relative;
			display: inline-flex;
			flex-direction: column;
			justify-content: space-between;
			flex-shrink: 0;
			width: 454rpx;
			height: 148rpx;

			.follow {
				position: absolute;
				right: 0;
				top: 0;
			}

			&__title {
				display: inline-flex;
				align-items: center;
				width: 100%;
				height: 50rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #000000;
				line-height: 42rpx;

				.tag {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 64rpx;
					height: 36rpx;
					border-radius: 8rpx;
					background: linear-gradient(119deg, #FFB681 9.31%, #FF8024 67.91%);
					margin-left: 12rpx;
					color: #ffffff;
					font-size: 20rpx;
					font-weight: 500;
				}
			}

			&__desc {
				padding-top: 16rpx;
				color: #929292;
				font-size: 28rpx;
				font-weight: 400;

				&.fans {
					color: #b5b5b5;
					font-size: 24rpx;
					font-weight: 400;
				}
			}

			&__tag {
				margin-top: 16rpx;
				width: 468rpx;
				height: 58rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
			}
		}
	}

	.lawyer-record {
		display: inline-flex;
		flex-direction: column;
		width: 100%;
		flex-shrink: 0;
		box-sizing: border-box;

		.tag {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 40rpx;
			background: #FBE8DA;
			border-radius: 4rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FF710A;
		}

		&__desc {
			display: inline-flex;
			width: 100%;
			font-weight: 400;
			font-size: 28rpx;
			color: #101010;
			line-height: 33rpx;

			&:nth-child(2) {
				margin-top: 46rpx;
			}

			&__content {
				display: flex;
				flex: 1;
				padding-left: 20rpx;
				box-sizing: border-box;
				font-weight: 400;
				font-size: 28rpx;
				color: #101010;
				line-height: 40rpx;
			}

			.ellipsis-line-clamp {}
		}

		&__location {
			display: inline-flex;
			flex-direction: column;
			width: 100%;
			padding: 20rpx;
			margin-top: 40rpx;
			box-sizing: border-box;
			background: rgba(217, 217, 217, 0.12);
			border-radius: 8rpx;

			&__desc {
				display: inline-flex;
				align-items: center;
				width: 100%;
				height: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #4B4B4B;

				&:last-child {
					margin-top: 28rpx;
				}
			}
		}
	}

	.lawyer-honor-section,
	.lawyer-user-comment {
		display: inline-flex;
		flex-wrap: wrap;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.lawyer-user-comment {
		margin-top: 30rpx;

		&__box {
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 8rpx;

			.to-comment {
				position: absolute;
				z-index: 1;
				right: -32rpx;
				bottom: 54rpx;
				width: 160rpx;
				height: 160rpx;
			}
		}


	}
</style>